<template>
  <div class="Question-containers">
    <b-jumbotron>
      <template #lead> {{ question }} </template>

      <hr class="my-4" />

      <b-list-group>
        <b-list-group-item
          :id="item"
          button
          v-for="(item, i) in answerList"
          :key="i"
          @click="onSelect(item)"
          >{{ item }}</b-list-group-item
        >
      </b-list-group>
      <!-- <p>{{ questions[index].correct_answer }}</p> -->
      <b-button variant="primary" @click="onSubmit()">Submit</b-button>
      <b-button variant="success" @click="onNext">Next</b-button>
    </b-jumbotron>
  </div>
</template>
<script>
export default {
  props: {
    question: String,
    answerList: Array,
    onSubmit: Function,
    onNext: Function,
    onSelect: Function,
  },
  data() {
    return {};
  },
  computed: {
    correctAnswer() {
      return this.questions[this.index].correct_answer;
    },
  },
  methods: {
    // selector(answer) {
    //   this.currentAnswer = answer;
    // },
    getRandomList(listArr) {
      let list = [...listArr];
      for (let index = 0; index < list.length; index++) {
        let rIndex = Math.floor(Math.random() * list.length);
        [list[index], list[rIndex]] = [list[rIndex], list[index]];
      }
      console.log("list------>", list);
      return list;
    },
  },
  // variantOfAnswer(item) {
  //   console.log(item);

  //   let variant = "light";
  //   if (this.currentAnswer !== "") {
  //     if (
  //       this.currentAnswer === item &&
  //       this.currentAnswer !== this.correctAnswer
  //     ) {
  //       variant = "danger";
  //     } else if (
  //       this.currentAnswer === item &&
  //       this.currentAnswer === this.correctAnswer
  //     ) {
  //       variant = "success";
  //     }
  //   }
  //   return variant;
  // },
};
</script>

